<template>
    <div class="container">
      <div class="search-container">
        <el-form @submit.native.prevent="onSubmit">
          <el-row :gutter="25" class="d-flex flex-wrap justify-content-center">
            <!-- 品种 -->
            <el-col :md="7" :sm="24" :xs="24">
              <el-form-item label="">
                <el-select v-model="form.breed" placeholder="请选择品种" style="width: 100%;">
                  <el-option v-for="option in breeds" :key="option.value" :label="option.text"
                    :value="option.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
  
            <!-- 毛色 -->
            <el-col :md="7" :sm="24" :xs="24">
              <el-form-item label="">
                <el-input v-model="form.color" suffix-icon="el-icon-search" placeholder="输入毛色"
                  style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
  
            <!-- 性别 -->
            <el-col :md="7" :sm="24" :xs="24">
              <el-form-item label="">
                <el-select v-model="form.gender" placeholder="请选择性别" style="width: 100%;">
                  <el-option v-for="option in genders" :key="option.value" :label="option.text"
                    :value="option.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
  
          </el-row>
          <el-row :gutter="25" class="d-flex flex-wrap justify-content-center">
            <!-- 年龄范围 -->
            <el-col :md="7" :sm="24" :xs="24">
              <el-form-item label="">
                <el-input v-model="form.ageRange" suffix-icon="el-icon-info" placeholder="例如: 0-1岁"
                  style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
  
            <el-col :md="7" :sm="24" :xs="24">
              <el-form-item label="">
                <el-input v-model="form.pupilColor" suffix-icon="el-icon-picture" placeholder="请输入瞳色"
                  style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
  
            <!-- 搜索按钮 -->
            <el-col :md="7" :sm="24" :xs="24">
              <el-button type="primary" native-type="submit" class="serch-btn" style="width: 100%;">搜索</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
  
      <!-- 领养模块 -->
      <div class="row mt-5 d-flex flex-column gap-4 justify-content-center adopt">
        <div :class="['col-12 col-md-12', { 'd-none': hoveredIndex !== index && hoveredIndex !== null }]"  v-for="(pet, index) in pets" :key="index"
           @mouseenter="handleMouseEnter(index)"
           @mouseleave="handleMouseLeave()">
          <div :class="['card mb-4 shadow-sm d-flex flex-column flex-md-row gap-4 border-0', { 'zoom-in mb-5': hoveredIndex === index }]"
          style="transition: transform 0.3s ease, opacity 0.3s ease;">
            <img class="adoptImg img-fluid" :src="pet.image" alt="">
            <div class="card-body card-body-mm">
              <div class="d-flex flex-column align-items-left gap-2">
                <h3 class="adopt-name">{{ pet.name }}</h3>
                <ul class="d-flex flex-column gap-3">
                  <li>品种：{{ pet.breed }}&nbsp;&nbsp;&nbsp;<font-awesome-icon icon="paw"
                      :style="{ color: pet.iconColor }" /></li>
                  <li>性别：{{ pet.gender }}&nbsp;&nbsp;&nbsp;<font-awesome-icon icon="paw"
                      :style="{ color: pet.iconColor }" /></li>
                  <li>年龄：{{ pet.age }}&nbsp;&nbsp;&nbsp;<font-awesome-icon icon="paw" :style="{ color: pet.iconColor }" />
                  </li>
                  <li>瞳色：{{ pet.eyeColor }}&nbsp;&nbsp;&nbsp;<font-awesome-icon icon="paw"
                      :style="{ color: pet.iconColor }" /></li>
                  <li>毛色：{{ pet.furColor }}&nbsp;&nbsp;&nbsp;<font-awesome-icon icon="paw"
                      :style="{ color: pet.iconColor }" /></li>
                </ul>
                <p class="description">
                  {{ pet.description }}
                </p>
                <div class="adoptBtn">立即收养</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        form: {
          // 品种
          breed: null,
          // 毛色
          color: '',
          // 性别
          gender: null,
          // n年龄
          ageRange: '',
          // 瞳色
          pupilColor: '',
        },
        breeds: [
          { value: null, text: '请选择品种' },
          { value: 'siamese', text: '暹罗猫' },
          { value: 'ragdoll', text: '布偶猫' },
          { value: 'british-shorthair', text: '英短' }
          // 添加更多品种选项
        ],
        genders: [
          { value: null, text: '请选择性别' },
          { value: 'male', text: '雄性' },
          { value: 'female', text: '雌性' }
        ],
        // 用于追踪当前悬停的卡片索引
        hoveredIndex: null, 
        pets: [
          {
            name: '喵喵',
            breed: '布偶猫',
            gender: '雌',
            age: '4个月',
            eyeColor: '红',
            furColor: '蓝紫',
            description: '这是一只活泼好动的小猫，名叫小跳。她总是充满好奇心，喜欢探索新环境。小跳特别喜欢追逐玩具和与人互动，非常适合有时间和精力陪伴她的家庭。',
            image: require('../../assets/images/mm1.jpg'),
            iconColor: 'rgba(250,202,193,1)'
          },
          {
            name: '呜呜',
            breed: '暹罗猫',
            gender: '雄',
            age: '6个月',
            eyeColor: '蓝',
            furColor: '棕白相间',
            description: '小花是一只非常聪明且友好的暹罗猫，喜欢跟人类交流，经常用叫声表达自己的需求。它非常适合那些想要一个互动伙伴的家庭。',
            image: require('../../assets/images/mm2.jpg'), // 替换为实际图片路径
            iconColor: 'rgba(250,202,193,1)'
          },
          {
            name: '无无',
            breed: '美国短毛猫',
            gender: '雌',
            age: '1岁',
            eyeColor: '绿',
            furColor: '白色',
            description: '小白性格温顺，是典型的“家猫”，喜欢安静地待在家里。它对家人非常依恋，适合寻找一个温暖的家庭来照顾它。',
            image: require('../../assets/images/mm3.jpg'), // 替换为实际图片路径
            iconColor: 'rgba(250,202,193,1)'
          },
          {
            name: '优优',
            breed: '英国短毛猫',
            gender: '雄',
            age: '2岁',
            eyeColor: '黄',
            furColor: '黑色',
            description: '小黑是一只强壮而独立的猫咪，但它也喜欢偶尔被人抚摸。它喜欢独自玩耍，但也会主动寻求主人的关注和陪伴。',
            image: require('../../assets/images/mm4.jpg'), // 替换为实际图片路径
            iconColor: 'rgba(250,202,193,1)'
          }
        ]
      };
    },
    methods: {
      onSubmit() {
        console.log('Form Submitted:', this.form);
      },
      handleMouseEnter(index) {
        this.hoveredIndex = index;
      },
      handleMouseLeave() {
        this.hoveredIndex = null;
      }
    }
  };
  </script>
  
  <style scoped>
  /* 如果需要进一步自定义样式 */
  .custom-width {
    width: 100%;
  }
  
  :deep(.el-input__inner) {
    border: 2px solid #eee;
    font-size: 14px;
    font-weight: 600;
    /* color: rgba(108,117,125,.8); */
    /* color: rgba(137,145,151,1); */
    color: rgba(137, 145, 151, .6);
    border-radius: 5px;
    padding: 15px;
    height: 3rem;
  }
  
  .serch-btn {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 16px 0px;
    display: inline-block;
    outline: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: #01bcb3;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
  }
  
  :deep(.el-input__icon) {
    font-size: 1.2rem;
    color: rgba(254, 161, 22, 1);
  }
  
  :deep(.el-select .el-input .el-select__caret) {
    font-size: 1rem;
    color: rgba(254, 161, 22, 1);
    font-weight: 600;
  }
  
  :deep(.el-input__inner:focus),
  :deep(.el-input.is-focus .el-input__inner) {
    border-color: #eee !important;
    /* 更改为所需的边框颜色 */
    outline: none;
  }
  
  :deep(.el-select-dropdown__item.selected) {
    color: rgba(254, 161, 22, 1) !important;
    font-weight: 700;
  }
  
  .adoptImg {
    width: 555px;
    /* min-height: 466px; */
    border-radius: 40px;
  }
  
  .adopt .adopt-name {
    font-family: 'Baloo Thambi', sans-serif;
    font-size: 2.5em;
    color: #000;
    line-height: 1em;
    font-weight: 800;
    letter-spacing: -0.2px;
    margin-bottom: 20px;
  }
  
  .adopt ul {
    font-size: 1.114em;
    line-height: 1.214em;
    text-transform: uppercase;
    font-family: 'Baloo Thambi', sans-serif;
    letter-spacing: -0.4px;
    color: #EF5030;
    font-weight: 800;
    padding-left: 0px;
  }
  
  .adopt p {
    font-size: 16px;
    font-weight: 400;
    color: #989797;
    overflow-x: hidden !important;
    -webkit-font-smoothing: antialiased;
    font-family: 'Lato', sans-serif;
    text-indent: 2rem;
    line-height: 2rem;
  }
  
  .adopt .adoptBtn {
    width: 10rem;
    border: 0;
    color: #fff;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    font-family: 'Baloo Thambi', sans-serif;
    font-size: 15px;
    transition: all .3s ease-in-out;
    border-radius: 25px;
    margin-top: 10px;
    letter-spacing: .4rem;
    line-height: 1em;
    padding: 20px 30px;
    text-transform: uppercase;
    background-color: #EF5030;
    box-shadow: inset 9px 0 0 0 #F19F1F;
  }
  .adopt .adoptBtn:hover{
    background-color: rgba(16,136,150,1);
    animation: shadowMorph 0.9s forwards; /* 应用动画 */
  }
  @keyframes shadowMorph {
    0% {
      box-shadow: inset 9px 0 0 0 #F19F1F;
    }
    100% {
      box-shadow: inset 9px 0 0 0 rgba(16,136,150,1);
    }
  }
  /* 放大效果 */
  .zoom-in {
    transform: scale(1.1); /* 放大比例 */
    z-index: 10; /* 确保放大的卡片在最前面 */
  }
  </style>